<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('上传文档')" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
    <style type="text/css">

    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-upload-document" enctype="multipart/form-data" >
        <input type="hidden" name="reqId" th:value="${reqId}"/>
        <input type="hidden" name="docFileIds"/>
        <div class="col-md-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">文档标题：</label>
                <div class="col-sm-9">
                    <input type="text" name="docTitle" class="form-control" placeholder="请输入标题" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">描述：</label>
                <div class="col-sm-9">
                    <textarea type="text" name="docDescription" class="form-control"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">Link：</label>
                <div class="col-sm-9">
                    <input type="text" name="docLink" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">附件：</label>
                <div class="col-sm-9">
                    <div class="file-loading">
                        <input id="uploadFile" name="docFile" type="file">
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-fileinput-js" />
<script th:inline="javascript">
    var prefix = ctx + "system/request2";

    let uploadedFileMap = {};

    $("#form-upload-document").validate({
        focusCleanup: true
    });

    function submitHandler() {

        if ($.validate.form()) {
            var data = $('#form-upload-document').serializeArray();
            $.operate.save(prefix + "/uploadDoc", data);
        }
    }

    $(document).ready(function () {
        // 多文件上传
        $("#uploadFile").fileinput({
            uploadUrl: prefix + '/uploadDoc/upload', //上传的地址
            uploadAsync: true, //是否异步上传
            showCaption: true,  //input框是否显示
            showUpload: false,   //上传按钮是否显示
            showPreview: true, //预览区域
            showClose: false, //关闭按钮
            autoUpload: true, //选择文件后是否自动上传
            dropZoneTitle: '拖拽文件到这里上传',
            maxFileCount: 5,
            maxFileSize: 500 * 1024   //单位kb，文件最大500M
        }).on('filebatchselected', function(event, files) {
            // 自动上传
            $(this).fileinput("upload");
        }).on('fileuploaded', function (event, data, previewId, index) {
            // 上传成功后处理
            const fileId = data.response.fileId;
            if (fileId) {
                uploadedFileMap[previewId] = fileId;
                updateFileIdHiddenInput();
            }
        }).on('fileremoved', function (event, id, index) {
            // 文件被删除后处理
            delete uploadedFileMap[previewId];
            updateFileIdHiddenInput();
        })
    });

    // 更新隐藏域
    function updateFileIdHiddenInput() {
        const fileIds = Object.values(uploadedFileMap);
        $("input[name='docFileIds']").val(fileIds.join(','));
    }

</script>
</body>
</html>